<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="font/iconfont.css">
</head>

<body style="display: flex;">
  <div class="Sidebar" id="side">
    <div class="inf">
      <span class="avatar"></span>
      <p>forggg | 管理员</p>
    </div>
    <div>
      <!-- <div class="nav-brand" style="color: rgb(246, 249, 255);">
        <ion-icon class="iconfont icon-shouqicaidan"></ion-icon>
      </div> -->
      <div class="nav-list ">
        <a href="#" class="nav-link active">
          <ion-icon class="iconfont icon-zhuye"></ion-icon>
          <span href="#">主页</span>
        </a>
        <br>
        <a href="#" class="nav-link">
          <ion-icon class="iconfont icon-huiyuan "></ion-icon>
          <span href="#">会员信息</span>
        </a>
        <br>
        <div class="nav-link  ">
          <ion-icon class="iconfont icon-diannao1 "></ion-icon>
          <span href="#">机房信息</span>

        </div>
      </div>
    </div>
    <p class="footer">退出登录</p>
  </div>
  <div class="home  ">
    <h3>网吧信息管理系统</h3>
    <ul>
      <li>该课设包括增(增加会员，增加机器)、删(删除会员、删除机器)、改(修改金额)、查(查找会员) 、结账功能</li>
      <li>假设本系统按每小时6元收费</li>
    </ul>
  </div>
  <div class="vip-inf Active" id="vip">
    <h3>会员信息</h3>
    <div class="coper-member">
      <div class="search">
        <div class="inputBox">
          <input type="text" class="search-name" placeholder="输入姓名">
          <span>查找姓名</span>
        </div>
        <button class="search-member">查找会员</button>
      </div>
      <div class="inputB">
        <div class="inputBox">
          <input type="text" name="" id="" class="name" placeholder="输入姓名">
          <span>输入姓名</span>
        </div>
        <div class="inputBox">
          <input type="text" name="" id="" class="recharge" placeholder="输入金额">
          <span>充值金额</span>
        </div>
        <button class="add-member">添加会员</button>
      </div>
    </div>
    <ul>
      <li><span class="card">卡号</span><span class="name">姓名</span><span class="extera"><span></span>余额/元<span
            class="recharge"></span></span><span class="delete"></span></li>
      <li><span class="card">001</span><span class="name">张俊辉</span><span class="extera"><span>123</span> <span
            class="recharge">充值</span></span><span class="delete">删除</span></li>
      <li><span class="card">002</span><span class="name">余炜</span><span class="extera"><span>123</span> <span
            class="recharge">充值</span></span><span class="delete">删除</li>
      <li><span class="card">003</span><span class="name">张恒昌</span><span class="extera"><span>123</span> <span
            class="recharge">充值</span></span><span class="delete">删除</span></li>
      <li><span class="card">004</span><span class="name">杨潇</span><span class="extera"><span>123</span> <span
            class="recharge">充值</span></span><span class="delete">删除</span></li>
      <li><span class="card">005</span><span class="name">武玉涛</span><span class="extera"><span>123</span> <span
            class="recharge">充值</span></span><span class="delete">删除</span></li>
    </ul>
  </div>
  <div class="computer-inf Active" id="computer">
    <h3>机房信息</h3>
    <div class="coper-computer">
      <div class="search">
        <div class="InputBox">
          <input type="text" class="add-computer" placeholder="输入型号">
          <span>添加电脑</span>
        </div>
        <button class="add-com">添加</button>
      </div>
      <div class="inputB">
        <div class="InputBox">
          <input type="text" name="" id="" class="numing" placeholder="输入编号">
          <span>输入编号</span>
        </div>
        <div class="InputBox">
          <input type="text" name="" id="" class="naming" placeholder="输入姓名">
          <span>输入姓名</span>
        </div>
        <button class="use-com">上机</button>
      </div>
    </div>
    <ul>
      <li>
        <span class="num">编号</span><span class="type">型号</span><span class="User">User</span><span
          class="Vip">是否会员</span><span class="condition">状态</span><span class="time">计时</span><span
          class="coper"></span>
      </li>
      <li>
        <span class="num">001</span><span class="type">华为</span><span class="User">-----</span><span
          class="Vip">-----</span><span class="condition">闲置</span><span class="time">-----</span><span
          class="coper">下机</span>
      </li>
      <li>
        <span class="num">002</span><span class="type">华为</span><span class="User">-----</span><span
          class="Vip">-----</span><span class="condition">闲置</span><span class="time">-----</span><span
          class="coper">下机</span>
      </li>
      <li>
        <span class="num">003</span><span class="type">华为</span><span class="User">-----</span><span
          class="Vip">-----</span><span class="condition">闲置</span><span class="time">-----</span><span
          class="coper">下机</span>
      </li>
      <li>
        <span class="num">004</span><span class="type">华为</span><span class="User">-----</span><span
          class="Vip">-----</span><span class="condition">闲置</span><span class="time">-----</span><span
          class="coper">下机</span>
      </li>
      <li>
        <span class="num">005</span><span class="type">华为</span><span class="User">-----</span><span
          class="Vip">-----</span><span class="condition">闲置</span><span class="time">-----</span><span
          class="coper">下机</span>
      </li>
      <li>
        <span class="num">006</span><span class="type">华为</span><span class="User">-----</span><span
          class="Vip">-----</span><span class="condition">闲置</span><span class="time">-----</span><span
          class="coper">下机</span>
      </li>
      <li>
        <span class="num">007</span><span class="type">华为</span><span class="User">-----</span><span
          class="Vip">-----</span><span class="condition">闲置</span><span class="time">-----</span><span
          class="coper">下机</span>
      </li>
      <li>
        <span class="num">008</span><span class="type">华为</span><span class="User">-----</span><span
          class="Vip">-----</span><span class="condition">闲置</span><span class="time">-----</span><span
          class="coper">下机</span>
      </li>
      <li>
        <span class="num">009</span><span class="type">华为</span><span class="User">-----</span><span
          class="Vip">-----</span><span class="condition">闲置</span><span class="time">-----</span><span
          class="coper">下机</span>
      </li>
      <li>
        <span class="num">010</span><span class="type">华为</span><span class="User">-----</span><span
          class="Vip">-----</span><span class="condition">闲置</span><span class="time">-----</span><span
          class="coper">下机</span>
      </li>

    </ul>

  </div>
  <script src="index.js"></script>
</body>

</html>